<template>
  <div id="cardContainer" class="wrapper">
    <QuestionBankCard class="card"></QuestionBankCard>
    <QuestionBankCard class="card"></QuestionBankCard>
    <QuestionBankCard class="card"></QuestionBankCard>
    <QuestionBankCard class="card"></QuestionBankCard>
    <QuestionBankCard class="card"></QuestionBankCard>
    <div class="card" :style="{ width: childWidth + 'px' }"></div>
  </div>
</template>

<script>
import QuestionBankCard from "@/components/QuestionBankCard.vue";
import { onMounted, reactive, ref, toRefs, watch } from "vue";

export default {
  components: {
    QuestionBankCard,
  },
  setup() {
    const childWidth = ref(300);
    onMounted(() => {
      const d = reactive({
        parentWidth: document.getElementById("cardContainer").offsetWidth,
      });
      watch(d, () => {
        console.log("change");
      });
      d.parentWidth = 200;
      console.log(d.parentWidth);
    });
    return {
      childWidth,
    };
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .card {
    margin: 1em;
  }
}
</style>